<template>
	<view class="container">
		<view>
			<view>结果：{{title}}</view>
			<u-button type="primary" @click="scanCamera">
				<u-icon name="scan" size="28" color="#ffffff"></u-icon>
				<text class="button-text">识别二维码</text>
			</u-button>
		</view>
		<u-swipe-action>
			<u-swipe-action-item v-for="(item, index) in list" :key="item.id" :options="item.options"
				@click="handleAction(index, $event)">
				<view class="list-item">
					{{ item.content }}
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>

	<!-- <view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="options2" :key="item.id"
				@click="swipeClick($event, index)">
				<view class="content-box">
					<text>{{ item.name }}</text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view> -->
	<!-- 原文链接：https://blog.csdn.net/qq_40323256/article/details/114337128 -->
</template>

<script>
	export default {

		components: {},

		data() {
			return {
				show: false,
				swipeList: [],
				isOpened: 'none',
				options2: [{
						text: '编辑',
						style: {
							backgroundColor: '#007e9a'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#F56C6C'
						}
					}
				],
				list: [{
						id: 1,
						content: "列表项 1",
						options: [{
								text: "编辑",
								style: {
									backgroundColor: "#2979ff"
								}
							},
							{
								text: "删除",
								style: {
									backgroundColor: "#ff4d4f"
								}
							}
						]
					},
					{
						id: 2,
						content: "列表项 2",
						options: [{
								text: "编辑",
								style: {
									backgroundColor: "#2979ff"
								}
							},
							{
								text: "删除",
								style: {
									backgroundColor: "#ff4d4f"
								}
							}
						]
					}
				],

				title: 'Hello'
			}
		},
		onLoad() {
			this.$http.get('/assetBrand/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
				.then(response => {
					console.log('获取到的响应结果：', response);
					// 在这里处理响应数据
					// 例如，将数据存储到本地变量中
					this.swipeList = response.data;
					console.log('响应数据：', this.swipeList);
				})
				.catch(err => {
					console.error('请求失败：', err);
					// 在这里处理错误
					uni.showToast({
						title: '请求失败，请稍后重试',
						icon: 'none'
					});
				});
		},
		onReady() {},
		methods: {
			handleAction(index, event) {
				const actionIndex = event.index; // 操作按钮的索引
				console.log(`操作了第 ${index + 1} 个列表项，点击了 "${event.text}" 按钮`);
				if (actionIndex === 1) {
					// 删除操作
					this.list.splice(index, 1);
				}
			},


			openPopupPage(type, id) {
				console.log("打开子页面")
				uni.navigateTo({
					url: '/pages/asset/asset?type=' + type + '&id=' + id,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}

				});
			},
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.swipeList.splice(index, 1);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (content.text === '添加') {
					if (this.swipeList.length < 6) {
						this.swipeList.push({
							id: new Date().getTime(),
							options: [{
									text: '置顶'
								},
								{
									text: '标记为已读',
									style: {
										backgroundColor: 'rgb(254,156,1)'
									}
								},
								{
									text: '删除',
									style: {
										backgroundColor: 'rgb(255,58,49)'
									}
								}
							],
							content: '新增' + new Date().getTime()
						});
						uni.showToast({
							title: `添加了一条数据`,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: `最多有六条数据`,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},

			scanCamera: function() {
				this.title = '进入扫码方法'
				// 允许从相机和相册扫码
				uni.scanCode({
					// scanType: ['qrCode', 'barCode'],
					// scanType: 'brCode',
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.title = res.result;

						// this.$http.get('/assetBrand/list')
						this.openPopupPage(res.scanType, res.result)
					},
				})
				// #ifdef H5
				console.log("H5端扫描")
				// this.getH5Qrcode()
				// this.imgUp()
				this.title = 'H5端扫描'
				// #endif
			},
			// h5选择二维码并解析 --有问题--没有公众号相关设置
			imgUp: function() {
				console.log("进入imgUp方法")
				const that = this
				if (this.$utils.is_weixin()) {
					this.$utils.scanQRCode((res) => {
						console.log("微信端：", res)
						if (res && res.resultStr) {
							that.patientId = res.resultStr
							that.getQRCmessage(that.patientId)
						} else {
							uni.showToast({
								title: '识别二维码失败,请重新上传!',
								duration: 2000,
								icon: 'none',
							})
						}
					})
				} else {
					uni.chooseImage({
						sizeType: ['original'],
						count: 1,
						success: function(res) {
							console.log("二维码识别的结果：", res)
							const tempFilePaths = res.tempFilePaths
							qrcode.decode(tempFilePaths[0])
							qrcode.callback = function(code) {
								console.log("二维码识别img：", code)
								that.title = code
								console.log("title:", this.title)
								if (code == 'error decoding QR Code') {
									uni.showToast({
										title: '识别二维码失败，请重新上传！',
										duration: 2000,
										icon: 'none',
									})
								} else {
									// that.patientId = code
									// that.getQRCmessage(that.patientId)
								}
							}
						},
					})
				}
			},
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}

	.button-text {
		color: #ffffff;
		margin-left: 10px;
	}
</style>